<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>测试</title>
  </head>
  <style>
    .container {
      width: 100%;
      height: 100vh;
      position: relative;
      background-color: #fff;
      margin: 0;
      padding: 0;
    }
    .container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(#000 0.5px, transparent 0.5px);
      background-size: 15px 15px;
      opacity: 0.3; /* 调整斑点透明度 */
    }
  </style>
  <body>
    <div class="container"></div>
    <script>
      // 网址：https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2003%20-%20Adding%20Zooming,%20Panning%20Behavior.html
      // 确保导入类型，例如
      // 从“scichart”导入 { MouseWheelZoomModifier, ZoomPanModifier };
      const mouseWheelZoomModifier = new MouseWheelZoomModifier(); // 添加鼠标滚轮缩放
      const zoomPanModifier = new ZoomPanModifier();  // 添加缩放
      const rubberBandZoomModifier = new RubberBandXyZoomModifier(); // 向图表添加平移行为
      const zoomExtentsModifier = new ZoomExtentsModifier(); // 双击缩放至自适应(缩放范围)

      // 鼠标滚轮缩放、平移和双击以缩放以适应
      sciChartSurface.chartModifiers.add(zoomExtentsModifier);
      sciChartSurface.chartModifiers.add(zoomPanModifier);
      sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
      sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
    </script>
  </body>
</html>
